<div class="bf-owner">
  <!--确认弹窗-->
  <p-confirmDialog acceptLabel="确认" rejectLabel="取消"></p-confirmDialog>
  <!--消息提示-->
  <p-messages  [closable]="true" [style]="{'position':'fixed','left': '10vw', 'top': '0','margin-top': '0','width': '100vw','z-index':'9999'}"></p-messages>
  <!--顶部按钮-->
  <div class="bf-owner-header">
    <div class=" ui-g-12">
      <div class="ui-g-1 bf-owner-header-btn bf-owner-header-btn-add" (click)="ownerAddClick()" [hidden]="btnHiden[0].hidden">
        <img class="bf-owner-header-img" src="assets/images/ic_add.png" alt="">
        <span>增 加</span>
      </div>
      <div class="ui-g-1 bf-owner-header-btn bf-owner-header-btn-modify" (click)="ownerModifyClick()" [hidden]="btnHiden[1].hidden">
        <img class="bf-owner-header-img bf-owner-header-img-modify" src="assets/images/ic_modify.png" alt="">
        <span>修 改</span>
      </div>
      <div class="ui-g-1 bf-owner-header-btn bf-owner-header-btn-Logout" style="width: 8vw" (click)="logoutClick()" [hidden]="btnHiden[2].hidden">
        <img class="bf-owner-header-img" src="assets/images/ic_delete.png" alt="">
        <span>注 销 业 主</span>
      </div>
      <div class="ui-g-1 bf-owner-header-btn bf-owner-header-btn-delete" style="width: 8vw" (click)="ownerDeleteClick()" [hidden]="btnHiden[3].hidden">
        <img class="bf-owner-header-img" src="assets/images/ic_delete.png" alt="">
        <span>删 除 房 间</span>
      </div>

      <div class="ui-g-1 bf-owner-header-btn bf-owner-header-btn-import" (click)="addMoreFileClick()" [hidden]="btnHiden[4].hidden">
        <img class="bf-owner-header-img" src="assets/images/ic_add.png" alt="">
        <span>导 入</span>
      </div>
      <div class="ui-g-1 bf-owner-header-btn bf-owner-header-btn-import" (click)="importOutFileClick()" [hidden]="btnHiden[5].hidden">
        <span>导 出</span>
      </div>
    </div>
    <!--搜索-->
    <div class="ui-inputgroup bf-owner-header-search" *ngIf="!btnHiden[6].hidden">
      <p-dropdown [options]="SearchTypeOption"   scrollHeight="100px" placeholder="请选查看范围..." (onChange)="searchTypeChange()" [style]="{'width': '8vw','margin-right': '1vw'}" [(ngModel)]="searchType"></p-dropdown>
      <input type="text" pInputText placeholder="请输入需要搜索的值" [(ngModel)]="inputSearchData" >
      <button id="disabled-btn" class="bf-owner-header-btn-search" type="button"  (click)="ownerSearchClick()"  label="搜索" >搜索</button>
    </div>
  </div>
  <!--表格-->
  <div class="bf-owner-table">
    <rbi-check-table-btn
      [option]="ownertableOption"
      [select]="ownerSelect"
      (selectData)="selectData($event)"
      (detail)="ownerDetailClick($event)">
    </rbi-check-table-btn>
  </div>
  <!--增加弹窗-->
  <p-dialog header="房屋添加" [(visible)]="ownerAddDialog" [width]="1100" [closable]="false">
    <div class="ui-g ui-fluid" [ngStyle]="{'line-height':'4vh'}">
      <div class="ui-g-6" [ngClass]="{dropdownKeyFilter: this.keyRoomInfoList[0]}">
        <div class="ui-g-4 right">
          <label ><span style="color: red">*</span>小区名称：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'3vh'}">
          <p-dropdown [options]="villageOption"  scrollHeight="100px" placeholder="请选择小区..."  [(ngModel)]="roomInfo.villageName" (onChange)="changeInput(roomInfo.villageName, 0)"></p-dropdown>
          <span [hidden]="!this.keyRoomInfoList[0]">此字段为必选字段</span>
        </div>
      </div>
      <div class="ui-g-6" [ngClass]="{InputKeyFilter: this.keyRoomInfoList[1]}">
        <div class="ui-g-4 right">
          <label><span style="color: red">*</span>地块名称：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'2vh'}">
          <input  type="text" pInputText placeholder="请输入地块名称..." [(ngModel)]="roomInfo.regionName" (blur)="changeInput(roomInfo.regionName, 1)">
          <span [hidden]="!this.keyRoomInfoList[1]">此字段为必填字段</span>
        </div>
      </div>
      <div class="ui-g-6" >
        <div class="ui-g-4 right">
          <label >楼栋名称：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'2vh'}">
          <input  type="text" pInputText placeholder="请输入楼栋名称..." [(ngModel)]="roomInfo.buildingName" (blur)="changeInput(roomInfo.buildingName, 2)">
<!--          <span [hidden]="!this.keyRoomInfoList[2]">此字段为必填字段</span>-->
        </div>
      </div>
      <div class="ui-g-6"  >
        <div class="ui-g-4 right">
          <label >单元名称：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'3vh'}">
          <input  type="text" pInputText placeholder="请输入单元名称..." [(ngModel)]="roomInfo.unitName" (blur)="changeInput(roomInfo.unitName, 3)">
<!--          <span [hidden]="!this.keyRoomInfoList[3]">此字段为必填字段</span>-->
        </div>
      </div>
      <div class="ui-g-6"  >
        <div class="ui-g-4 right">
          <label >楼层：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'2vh'}">
          <input  type="number" pInputText placeholder="请输入楼层..." [(ngModel)]="roomInfo.floor" (blur)="changeInput(roomInfo.floor, 4)">
<!--          <span [hidden]="!this.keyRoomInfoList[4]">此字段为必填字段</span>-->
        </div>
      </div>
      <div class="ui-g-6"  [ngClass]="{InputKeyFilter: this.keyRoomInfoList[2]}">
        <div class="ui-g-4 right">
          <label for="addroomCode"><span style="color: red">*</span>房间编号：</label>
        </div>
        <div class="ui-g-8">
          <input id="addroomCode" type="text" pInputText placeholder="请输入房间编号..."  [(ngModel)]="roomInfo.roomCode" (blur)="changeInput(roomInfo.roomCode, 2)">
          <span [hidden]="!this.keyRoomInfoList[2]">此字段为必填字段</span>
        </div>
      </div>
      <div class="ui-g-6"  [ngClass]="{InputKeyFilter: this.keyRoomInfoList[3]}">
        <div class="ui-g-4 right">
          <label for="addroomSize"><span style="color: red">*</span>房屋面积：</label>
        </div>
        <div class="ui-g-8">
          <input id="addroomSize" type="text" pInputText placeholder="请输入房屋面积..." [(ngModel)]="roomInfo.roomSize" (blur)="changeInput(roomInfo.roomSize, 3)">
          <span [hidden]="!this.keyRoomInfoList[3]">此字段为必填字段</span>
        </div>
      </div>
      <div class="ui-g-6"  [ngClass]="{dropdownKeyFilter: this.keyRoomInfoList[4]}">
        <div class="ui-g-4 right" >
          <label ><span style="color: red">*</span>房屋类型：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'3vh'}">
          <p-dropdown [options]="roomTypeOption"  scrollHeight="100px" placeholder="请选择房屋类型..."  [(ngModel)]="roomInfo.roomType" (onChange)="changeInput(roomInfo.roomType, 4)"></p-dropdown>
          <span [hidden]="!this.keyRoomInfoList[4]">此字段为必选字段</span>
        </div>
      </div>
      <div class="ui-g-6"  [ngClass]="{InputKeyFilter: this.keyRoomInfoList[5]}">
        <div class="ui-g-4 right">
          <label ><span style="color: red">*</span>物业费开始计费时间：</label>
        </div>
        <div class="ui-g-8">
          <p-calendar [(ngModel)]="roomInfo.startBillingTime" placeholder="物业费开始计费时间..." [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"  yearRange="1900:2150" [locale]="esDate" (onSelect)="changeInput(roomInfo.startBillingTime, 5)"></p-calendar>
          <span [hidden]="!this.keyRoomInfoList[5]">此字段为必填字段</span>
        </div>
      </div>
      <div class="ui-g-6"  [ngClass]="{InputKeyFilter: this.keyRoomInfoList[6]}">
        <div class="ui-g-4 right">
          <label ><span style="color: red">*</span>实际交房时间：</label>
        </div>
        <div class="ui-g-8">
          <p-calendar [(ngModel)]="roomInfo.realRecyclingHomeTime" placeholder="实际交房时间..." [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"  yearRange="1900:2150" [locale]="esDate" (onSelect)="changeInput(roomInfo.realRecyclingHomeTime, 6)"></p-calendar>
          <span [hidden]="!this.keyRoomInfoList[6]">此字段为必填字段</span>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4 right">
          <label >装修情况：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'3vh'}">
          <p-dropdown [options]="renovationStatusOption"  scrollHeight="100px" placeholder="请选择装修情况..." [(ngModel)]="roomInfo.renovationStatus" (onChange)="renovationChange($event)"></p-dropdown>
        </div>
      </div>

      <div class="ui-g-6"  [hidden]="timeHide">
        <div class="ui-g-4 right">
          <label >装修开始日期：</label>
        </div>
        <div class="ui-g-8">
          <p-calendar [(ngModel)]="roomInfo.renovationStartTime" placeholder="请选择装修开始日期..." [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"  yearRange="1900:2150" ></p-calendar>
        </div>
      </div>
      <div class="ui-g-6" [hidden]="timeHide">
        <div class="ui-g-4 right">
          <label >装修结束日期：</label>
        </div>
        <div class="ui-g-8">
          <p-calendar [(ngModel)]="roomInfo.renovationDeadline" placeholder="请选择装修结束日期..." [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"  yearRange="1900:2150" ></p-calendar>
        </div>
      </div>
      <div class="ui-g-12" >
        <p-scrollPanel [style]="{width:'100%',height: '25vh'}" styleClass="custombar">
          <p-table [columns]="owerMoreTitleDetail" [value]="ownerList"  [(selection)]="ownerUserSelect">
            <ng-template pTemplate="header" let-columns>
              <tr >
                <th style="width: 3em" [ngStyle]="{'height': '5vh'}">
                  <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                </th>
                <th *ngFor="let col of columns;let i = index" [ngStyle]="{'height': '5vh'}">
                  {{col.header}}
                </th>
              </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
              <tr [pSelectableRow]="rowData" [ngStyle]="{'background' : '#FFFFFF', 'color':'#000'}">
                <td>
                  <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
                </td>
                <td  *ngFor="let col of columns.slice(0,columns.length - 1)" style="text-align: center; overflow-x: auto">
                   {{rowData[col.field]}}
                </td>
                <td [ngStyle]="{'text-align': 'center'}">
                  <button class="bf-owner-Modifydialog-Btn"  (click)="deleteOwerMoreClick(rowIndex)">删除</button>
                </td>
              </tr>
            </ng-template>
          </p-table>
        </p-scrollPanel>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <button class="bf-owner-dialog-Btn bf-owner-dialog-Btn-sure" (click)="addOwerClick()">添加</button>
        </div>
      </div>
    </div>
    <p-footer>
      <div class="ui-dialog-buttonpane ui-helper-clearfix" style="text-align: center">
        <button class="bf-owner-dialog-Btn bf-owner-dialog-Btn-sure" (click)="ownerSureClick('添加')">确认</button>
        <button class="bf-owner-dialog-Btn bf-owner-dialog-Btn-false" (click)="ownerAddDialog=false; clearData()">取消</button>
      </div>
    </p-footer>
  </p-dialog>
  <!--修改弹窗-->
  <p-dialog header="房屋修改" [(visible)]="ownerModifayDialog" [width]="1300" [closable]="false">
    <!--Content-->
    <div class="ui-g ui-fluid" [ngStyle]="{'line-height':'4vh'}">
      <div class="ui-g-6">
        <div class="ui-g-4 right">
          <label ><span style="color: red">*</span>小区名称：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'2vh'}">
          <input  type="text" pInputText  disabled placeholder="请输小区名称" [(ngModel)]="roomInfo.villageName">
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4 right">
          <label><span style="color: red">*</span>地块名称：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'2vh'}">
          <input  type="text" pInputText  disabled placeholder="请输地块名称"  [(ngModel)]="roomInfo.regionName">
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4 right">
          <label >楼栋名称：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'2vh'}">
          <input  type="text" pInputText disabled  placeholder="请输入楼栋名称" [(ngModel)]="roomInfo.buildingName">
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4 right">
          <label >单元名称：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'2vh'}">
          <input  type="text" pInputText disabled placeholder="请输入单元名称" [(ngModel)]="roomInfo.unitName">
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4 right">
          <label >楼层：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'2vh'}">
          <input  type="number"   disabled pInputText placeholder="请输入单元名称..." [(ngModel)]="roomInfo.floor" >
<!--          <span [hidden]="!this.keyRoomInfoList[4]">此字段为必填字段</span>-->
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4 right">
          <label for="addroomCode"><span style="color: red">*</span>房间编号：</label>
        </div>
        <div class="ui-g-8">
          <input  type="text" pInputText disabled placeholder="请输入房间编号..." [(ngModel)]="roomInfo.roomCode">
        </div>
      </div>
      <div class="ui-g-6" [ngClass]="{InputKeyFilter: this.keyRoomInfoList[3]}">
        <div class="ui-g-4 right">
          <label for="addroomSize"><span style="color: red">*</span>房屋面积：</label>
        </div>
        <div class="ui-g-8">
          <input  type="text" pInputText  placeholder="请输入房屋面积..." [(ngModel)]="roomInfo.roomSize" (blur)="changeInput(roomInfo.roomSize, 3)">
          <span [hidden]="!this.keyRoomInfoList[3]">此字段为必填字段</span>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4 right">
          <label ><span style="color: red">*</span>房屋类型：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'3vh'}">
          <p-dropdown [options]="roomTypeOption" disabled placeholder="请选择房屋类型" scrollHeight="100px"  [(ngModel)]="roomInfo.roomType"></p-dropdown>
        </div>
      </div>
      <div class="ui-g-6" [ngClass]="{InputKeyFilter: this.keyRoomInfoList[4]}">
        <div class="ui-g-4 right">
          <label ><span style="color: red">*</span>房屋状态：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'3vh'}">
          <p-dropdown [options]="roomStatusOption" placeholder="请选择房屋状态"  scrollHeight="100px"   [(ngModel)]="roomInfo.roomStatus" (blur)="changeInput(roomInfo.roomStatus, 4)"></p-dropdown>
          <span [hidden]="!this.keyRoomInfoList[4]">此字段为必填字段</span>
        </div>
      </div>
      <div class="ui-g-6"  [ngClass]="{InputKeyFilter: this.keyRoomInfoList[5]}">
        <div class="ui-g-4 right">
          <label ><span style="color: red">*</span>物业费开始计费时间：</label>
        </div>
        <div class="ui-g-8">
          <p-calendar [(ngModel)]="roomInfo.startBillingTime" placeholder="物业费开始计费时间..." [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"  yearRange="1900:2150" [locale]="esDate" (onBlur)="changeInput(roomInfo.startBillingTime, 5)"></p-calendar>
          <span [hidden]="!this.keyRoomInfoList[5]">此字段为必填字段</span>
        </div>
      </div>
      <div class="ui-g-6"  [ngClass]="{InputKeyFilter: this.keyRoomInfoList[6]}">
        <div class="ui-g-4 right">
          <label ><span style="color: red">*</span>实际交房时间：</label>
        </div>
        <div class="ui-g-8">
          <p-calendar [(ngModel)]="roomInfo.realRecyclingHomeTime" placeholder="实际交房时间..." [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"  yearRange="1900:2150" [locale]="esDate" (onBlur)="changeInput(roomInfo.realRecyclingHomeTime, 6)"></p-calendar>
          <span [hidden]="!this.keyRoomInfoList[6]">此字段为必填字段</span>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4 right">
          <label >装修情况：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'3vh'}">
          <p-dropdown [options]="renovationStatusOption"  scrollHeight="100px" [(ngModel)]="roomInfo.renovationStatus" placeholder="请选择装修状态" (onChange)="renovationChange($event)"></p-dropdown>

        </div>
      </div>
      <div class="ui-g-6"  [hidden]="timeHide">
        <div class="ui-g-4 right">
          <label >装修开始日期：</label>
        </div>
        <div class="ui-g-8">
          <p-calendar [(ngModel)]="roomInfo.renovationStartTime" placeholder="请选择装修开始日期..." [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"  yearRange="1900:2150" [locale]="esDate"></p-calendar>
        </div>
      </div>
      <div class="ui-g-6" [hidden]="timeHide">
        <div class="ui-g-4 right">
          <label >装修结束日期：</label>
        </div>
        <div class="ui-g-8">
          <p-calendar [(ngModel)]="roomInfo.renovationDeadline" placeholder="请选择装修结束日期..." [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"  yearRange="1900:2150" [locale]="esDate"></p-calendar>
        </div>
      </div>
      <div class="ui-g-12">
        <p-scrollPanel [style]="{width:'100%',height: '25vh'}" styleClass="custombar">
          <p-table [columns]="owerMoreTitleDetail" [value]="ownerList"  [(selection)]="ownerUserSelect">
            <ng-template pTemplate="header" let-columns>
              <tr >
                <th style="width: 3em" [ngStyle]="{'height': '5vh'}">
                  <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                </th>
                <th *ngFor="let col of columns;let i = index" [ngStyle]="{'height': '5vh'}">
                  {{col.header}}
                </th>
              </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
              <tr [pSelectableRow]="rowData" [ngStyle]="{'background' : '#FFFFFF', 'color':'#000'}">
                <td>
                  <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
                </td>
                <td  *ngFor="let col of columns.slice(0,columns.length - 1)" style="text-align: center; overflow: auto">
                  {{rowData[col.field]}}
                </td>
                <td [ngStyle]="{'text-align': 'center'}">
                  <button class="bf-owner-Modifydialog-Btn"  (click)="deleteModifyClick(rowData)">删除</button>
                </td>
              </tr>
            </ng-template>
          </p-table>
        </p-scrollPanel>
      </div>
      <div class="ui-g-12">
        <div class="ui-g-6">
          <button class="bf-owner-dialog-Btn bf-owner-dialog-Btn-sure" (click)="addOwerClick()">添加</button>
          <button class="bf-owner-dialog-Btn bf-owner-dialog-Btn-modify" (click)="modifyMoreOwerClick()">修改</button>
        </div>
      </div>
    </div>
    <p-footer>
      <div class="ui-dialog-buttonpane ui-helper-clearfix" style="text-align: center">
        <button class="bf-owner-dialog-Btn bf-owner-dialog-Btn-sure" (click)="ownerSureClick('修改')">确认</button>
        <button class="bf-owner-dialog-Btn bf-owner-dialog-Btn-false"  (click)="ownerModifyFalseDialog()">取消</button>
      </div>
    </p-footer>
  </p-dialog>
  <!--详情弹窗-->
  <p-dialog header="详细信息" [(visible)]="ownerDetailDialog" [width]="1100" class="owerDetail">
    <p-scrollPanel [style]="{width:'100%',height: '70vh'}" styleClass="custombar">
      <div class="ui-g ui-fluid" [ngStyle]="{'text-align':'center'}">
        <div class="ui-g-12" style="text-align: left">
          <h3>业主信息：</h3>
        </div>
        <div class="ui-g-6" *ngFor="let item of owerMoreDetailDetail" style="line-height: 4vh">
          <div class="ui-g-4" style="text-align: right">
            <label>{{item.label}}：</label>
          </div>
          <div class="ui-g-8" >
            <span >{{item.value}}</span>
          </div>
        </div>
        <div class="ui-g-12" style="text-align: left" >
          <h3>缴费信息：</h3>
        </div>
        <div class="ui-g-12" style="position: relative" >
          <div *ngIf="this.pieDatas.length === 0">未查询到该用户的缴费记录</div>
          <div style="position: absolute;z-index: 99999;right: 5vw;top: 10vh" *ngIf="this.pieDatas.length !== 0">
            <div style="margin: 3vh 0" *ngFor="let item of pieBtnList">
              <button class="bf-owner-dialog-pie-btn" [ngStyle]="{'background': item.color}" (click)="changePieDataClick(item)">{{item.label}}</button>
            </div>
          </div>
          <div class="ui-g-12" *ngIf="this.pieDatas.length !== 0">
            <rbi-echarts-payment-pie [datas]="this.pieDatas"></rbi-echarts-payment-pie>
          </div>
        </div>
        <div class="ui-g-12" style="text-align: left" *ngIf="roomList.length !== 0">
          <h3>房间信息：</h3>
        </div>
        <p-scrollPanel [style]="{width:'100%',height: 'auto'}" styleClass="custombar" *ngIf="roomList !== []">
          <p-table [columns]="ownerRoomCodeDetailTitle" [value]="roomList"  [(selection)]="ownerUserSelect" [style]="{'width': '100%'}">
            <ng-template pTemplate="header" let-columns>
              <tr >
                <th *ngFor="let col of columns" [ngStyle]="{'height': '5vh'}">
                  {{col.header}}
                </th>
              </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
              <tr [pSelectableRow]="rowData" [ngStyle]="{'background' : '#FFFFFF', 'color':'#000'}">
                <td  *ngFor="let col of columns" [ngStyle]="{'overflow-x': 'auto'}">
                  {{rowData[col.field]}}
                </td>
              </tr>
            </ng-template>
          </p-table>
        </p-scrollPanel>
        <div class="ui-g-12" style="text-align: left"  *ngIf="ParkingSpaceList.length !== 0">
          <h3>车位信息：</h3>
        </div>
        <p-scrollPanel [style]="{width:'100%',height: 'aoto'}" styleClass="custombar" *ngIf="ParkingSpaceList.length !== 0">
          <p-table [columns]="ownerParkingSpaceDetailTitle" [value]="ParkingSpaceList"  [style]="{'width': '100%'}">
            <ng-template pTemplate="header" let-columns>
              <tr >
                <th *ngFor="let col of columns" [ngStyle]="{'height': '5vh'}">
                  {{col.header}}
                </th>
              </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
              <tr [pSelectableRow]="rowData" [ngStyle]="{'background' : '#FFFFFF', 'color':'#000'}">
                <td  *ngFor="let col of columns" [ngStyle]="{'overflow-x': 'auto'}">
                  {{rowData[col.field]}}
                </td>
              </tr>
            </ng-template>
          </p-table>
        </p-scrollPanel>
      </div>
    </p-scrollPanel>
    <p-footer>
      <div class="ui-dialog-buttonpane ui-helper-clearfix" style="text-align: center">
        <!--<button class="bf-owner-dialog-Btn bf-owner-dialog-Btn-sure" (click)="ownerModifySureClick()">确认</button>-->
        <button class="bf-owner-dialog-Btn bf-owner-dialog-Btn-false"  (click)="ownerDetailDialog=false">取消</button>
      </div>
    </p-footer>
  </p-dialog>
  <!--业主资料-->
  <p-dialog header="业主添加" [(visible)]="ownerDialog" [width]="900" [closable]="false">
    <!--Content-->
    <div class="ui-g ui-fluid" [ngStyle]="{'line-height':'4vh'}">
      <div class="ui-g-6" [ngClass]="{InputKeyFilter: keyOwnerInfoList[0]}">
        <div class="ui-g-4 right">
          <label ><span style="color: red">*</span>客户名称：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'2vh'}">
          <input  type="text" pInputText placeholder="请输入客户名称...(张先生)" [(ngModel)]="ownerinfo.surname" [pKeyFilter]="toolSrv.verifyName" [pValidateOnly]="true">
          <p-message  severity="error" text="请输入符合规定的客户名称" [hidden]="(ownerinfo.surname === undefined || ownerinfo.surname === '')? !toolSrv.verifyName.test(ownerinfo.surname): toolSrv.verifyName.test(ownerinfo.surname)"></p-message>
        </div>
      </div>
      <div class="ui-g-6" [ngClass]="{InputKeyFilter: keyOwnerInfoList[1]}">
        <div class="ui-g-4 right">
          <label ><span style="color: red">*</span>客户电话：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'2vh'}">
          <input  type="text" pInputText placeholder="请输入客户电话..." [(ngModel)]="ownerinfo.mobilePhone" >
          <p-message  severity="error" text="请输入符合规定的11位手机号(13/17/14/15/18开头的格式)" [hidden]="(ownerinfo.mobilePhone === undefined || ownerinfo.mobilePhone === '')? !toolSrv.verifyPhone.test(ownerinfo.mobilePhone): toolSrv.verifyPhone.test(ownerinfo.mobilePhone)"></p-message>
        </div>
      </div>
      <div class="ui-g-6" [ngClass]="{dropdownKeyFilter: keyOwnerInfoList[2]}">
        <div class="ui-g-4 right">
          <label ><span style="color: red">*</span>客户身份：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'3vh'}">
          <p-dropdown [options]="identityOption"  scrollHeight="100px" placeholder="请选择客户身份..."  [(ngModel)]="ownerinfo.identity"></p-dropdown>
        </div>
      </div>
      <div class="ui-g-6" [ngClass]="{InputKeyFilter: keyOwnerInfoList[3]}">
        <div class="ui-g-4 right">
          <label ><span style="color: red">*</span>身份号码：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'2vh'}">
          <input  type="text" pInputText placeholder="请输入身份号码..." [(ngModel)]="ownerinfo.idNumber" >
        </div>
      </div>
      <div class="ui-g-6" [ngClass]="{dropdownKeyFilter: keyOwnerInfoList[4]}">
        <div class="ui-g-4 right">
          <label for="addroomSize"><span style="color: red">*</span>是否正常缴费：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'3vh'}">
          <p-dropdown [options]="normalChargeOption"  scrollHeight="100px" placeholder="请选择常缴费状态..."  [(ngModel)]="ownerinfo.normalPaymentStatus"></p-dropdown>
        </div>
      </div>

<!--      <div class="ui-g-6">-->
<!--        <div class="ui-g-4">-->
<!--          <label >*物业费开始计费时间：</label>-->
<!--        </div>-->
<!--        <div class="ui-g-8">-->
<!--          <p-calendar [(ngModel)]="ownerinfo.startBillingTime" placeholder="物业费开始计费时间..." [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"  yearRange="2017:2030" [locale]="esDate"></p-calendar>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="ui-g-6">-->
<!--        <div class="ui-g-4">-->
<!--          <label >*实际交房时间：</label>-->
<!--        </div>-->
<!--        <div class="ui-g-8">-->
<!--          <p-calendar [(ngModel)]="ownerinfo.realRecyclingHomeTime" placeholder="实际交房时间..." [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"  yearRange="2017:2030" [locale]="esDate"></p-calendar>-->
<!--        </div>-->
<!--      </div>-->
      <div class="ui-g-6">
        <div class="ui-g-4 right">
          <label >备注：</label>
        </div>
        <div class="ui-g-8">
          <textarea  type="text" pInputText placeholder="备注..." [(ngModel)]="ownerinfo.remarks"></textarea>
        </div>
      </div>
    </div>
    <p-footer>
      <div class="ui-dialog-buttonpane ui-helper-clearfix">
        <button class="bf-owner-dialog-Btn bf-owner-dialog-Btn-sure" (click)="owerInfoClick('add')">确认</button>
        <button class="bf-owner-dialog-Btn bf-owner-dialog-Btn-false" (click)="ownerDialog=false;">取消</button>
      </div>
    </p-footer>
  </p-dialog>
  <!--业主修改-->
  <p-dialog header="业主修改" [(visible)]="ownerModifyDialog" [width]="900" [closable]="false">
    <!--Content-->
    <div class="ui-g ui-fluid" [ngStyle]="{'line-height':'4vh'}">
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label ><span style="color: red">*</span>客户名称：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'2vh'}">
          <input  type="text" pInputText  placeholder="请输入客户名称" [(ngModel)]="ownerinfo.surname">
          <p-message  severity="error" text="请输入客户名称" [hidden]="(ownerinfo.surname !== undefined && ownerinfo.surname !== '')"></p-message>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label ><span style="color: red">*</span>客户电话：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'2vh'}">
          <input  type="text" pInputText placeholder="请输入客户电话" [(ngModel)]="ownerinfo.mobilePhone">
          <p-message  severity="error" text="请输入符合规定的11位手机号(13/17/14/15/18开头的格式)" [hidden]="(ownerinfo.mobilePhone === undefined || ownerinfo.mobilePhone === '')? !toolSrv.verifyPhone.test(ownerinfo.mobilePhone): toolSrv.verifyPhone.test(ownerinfo.mobilePhone)"></p-message>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label ><span style="color: red">*</span>身份号码：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'2vh'}">
          <input  type="text" pInputText placeholder="请输入客户电话..." [(ngModel)]="ownerinfo.idNumber">
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label ><span style="color: red">*</span>客户身份：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'2vh'}">
          <p-dropdown [options]="identityOption"  scrollHeight="100px" [placeholder]="ownerinfo.identity"  [(ngModel)]="ownerinfo.identity"></p-dropdown>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label for="addroomSize"><span style="color: red">*</span>是否正常缴费：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'2vh'}">
          <p-dropdown [options]="normalChargeOption"  scrollHeight="100px" [placeholder]="ownerinfo.normalPaymentStatus"  [(ngModel)]="ownerinfo.normalPaymentStatus"></p-dropdown>
        </div>
      </div>
<!--      <div class="ui-g-6">-->
<!--        <div class="ui-g-4">-->
<!--          <label >物业费开始计费时间：</label>-->
<!--        </div>-->
<!--        <div class="ui-g-8">-->
<!--          <p-calendar [(ngModel)]="ownerinfo.startBillingTime" [placeholder]="ownerinfo.startBillingTime" [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"  yearRange="2017:2030" [locale]="esDate"></p-calendar>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="ui-g-6">-->
<!--        <div class="ui-g-4">-->
<!--          <label >实际交房时间：</label>-->
<!--        </div>-->
<!--        <div class="ui-g-8">-->
<!--          <p-calendar [(ngModel)]="ownerinfo.realRecyclingHomeTime" [placeholder]="ownerinfo.realRecyclingHomeTime" [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"  yearRange="2017:2030" [locale]="esDate"></p-calendar>-->
<!--        </div>-->
<!--      </div>-->
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label >备注：</label>
        </div>
        <div class="ui-g-8">
          <textarea  type="text" pInputText placeholder="请输入备注" [(ngModel)]="ownerinfo.remarks"></textarea>
        </div>
      </div>
    </div>
    <p-footer>
      <div class="ui-dialog-buttonpane ui-helper-clearfix">
        <button class="bf-owner-dialog-Btn bf-owner-dialog-Btn-sure" (click)="owerInfoClick('modify')">确认</button>
        <button class="bf-owner-dialog-Btn bf-owner-dialog-Btn-false" (click)="ownerModifyDialog=false;">取消</button>
      </div>
    </p-footer>
  </p-dialog>
  <!--业主导出信息设置-->
  <p-dialog header="业主导出信息设置" [(visible)]="downOwnerInfoDialog" [width]="600" [closable]="false">
    <div class="ui-g ui-fluid" [ngStyle]="{'line-height':'4vh'}">
      <div class="ui-g-8">
        <div class="ui-g-4">
          <label ><span style="color: red">*</span>客户身份：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'2vh'}">
          <p-dropdown [options]="identityOption"  scrollHeight="100px" placeholder="请选择客户身份..."  [(ngModel)]="downLoadIndentity"></p-dropdown>
        </div>
      </div>
    </div>
    <p-footer>
      <div class="ui-dialog-buttonpane ui-helper-clearfix">
        <button class="bf-owner-dialog-Btn bf-owner-dialog-Btn-sure" (click)="downloadFileOwnerInfo()">确认</button>
        <button class="bf-owner-dialog-Btn bf-owner-dialog-Btn-false" (click)="downOwnerInfoDialog=false;">取消</button>
      </div>
    </p-footer>
  </p-dialog>
  <rbi-file-pop [UploadFileOption]="UploadFileOption" (event)="ownerUploadSureClick($event)"></rbi-file-pop>
  <rbi-upload-file-record [uploadRecordOption]="uploadRecordOption"></rbi-upload-file-record>
  <rbi-paging [option]="option" (pageClick)="nowpageEventHandle($event)"></rbi-paging>
</div>
